<template>
    <nav>
        <div class="container gWidth clearfix">
            <div class="left fl clearfix">
                <a href="#" class="logo fl"></a>
                <div class="city-box fl">
                    <div class="city-selected">
                        <span class="city-name">长沙</span>
                        <span class="fa fa-caret-down"></span>
                    </div>

                    <div class="city-selector">
                        <div class="gps-city">
                            <span>定位城市 : </span>
                            <span>长沙</span>
                        </div>
                        <div class="city-ul-box">
                            <ul class="city-ul">
                                <li class="clearfix">
                                    <div>
                                        <span>A</span>
                                    </div>
                                    <div>
                                        <a>阿拉善盟</a>
                                        <a>鞍山</a>
                                        <a>安庆</a>
                                        <a>安阳</a>
                                        <a>阿坝</a>
                                        <a>安顺</a>
                                        <a>安康</a>
                                        <a>阿勒泰</a>
                                        <a>阿克苏</a>
                                        <a>安吉</a>
                                        <a>安丘</a>
                                        <a>安岳</a>
                                        <a>安平</a>
                                        <a>安宁</a>
                                        <a>安溪</a>
                                        <a>安化</a>
                                        <a>阿勒泰市</a>
                                        <a>安福</a>
                                        <a>阿荣旗</a>
                                        <a>安州区</a>
                                    </div>

                                </li>
                                <li class="clearfix">
                                    <div>
                                        <span>B</span>
                                    </div>
                                    <div>
                                        <a>阿拉善盟</a>
                                        <a>鞍山</a>
                                        <a>安庆</a>
                                        <a>安阳</a>
                                        <a>阿坝</a>
                                        <a>安顺</a>
                                        <a>安康</a>
                                        <a>阿勒泰</a>
                                        <a>阿克苏</a>
                                        <a>安吉</a>
                                        <a>安丘</a>
                                        <a>安岳</a>
                                        <a>安平</a>
                                        <a>安宁</a>
                                        <a>安溪</a>
                                        <a>安化</a>
                                        <a>阿勒泰市</a>
                                        <a>安福</a>
                                        <a>阿荣旗</a>
                                        <a>安州区</a>
                                    </div>

                                </li>
                                <li class="clearfix">
                                    <div>
                                        <span>V</span>
                                    </div>
                                    <div>
                                        <a>阿拉善盟</a>
                                        <a>鞍山</a>
                                        <a>安庆</a>
                                        <a>安阳</a>
                                        <a>阿坝</a>
                                        <a>安顺</a>
                                        <a>安康</a>
                                        <a>阿勒泰</a>
                                        <a>阿克苏</a>
                                        <a>安吉</a>
                                        <a>安丘</a>
                                        <a>安岳</a>
                                        <a>安平</a>
                                        <a>安宁</a>
                                        <a>安溪</a>
                                        <a>安化</a>
                                        <a>阿勒泰市</a>
                                        <a>安福</a>
                                        <a>阿荣旗</a>
                                        <a>安州区</a>
                                    </div>

                                </li>
                                <li class="clearfix">
                                    <div>
                                        <span>D</span>
                                    </div>
                                    <div>
                                        <a>阿拉善盟</a>
                                        <a>鞍山</a>
                                        <a>安庆</a>
                                        <a>安阳</a>
                                        <a>阿坝</a>
                                        <a>安顺</a>
                                        <a>安康</a>
                                        <a>阿勒泰</a>
                                        <a>阿克苏</a>
                                        <a>安吉</a>
                                        <a>安丘</a>
                                        <a>安岳</a>
                                        <a>安平</a>
                                        <a>安宁</a>
                                        <a>安溪</a>
                                        <a>安化</a>
                                        <a>阿勒泰市</a>
                                        <a>安福</a>
                                        <a>阿荣旗</a>
                                        <a>安州区</a>
                                    </div>

                                </li>
                                <li class="clearfix">
                                    <div>
                                        <span>E</span>
                                    </div>
                                    <div>
                                        <a>阿拉善盟</a>
                                        <a>鞍山</a>
                                        <a>安庆</a>
                                        <a>安阳</a>
                                        <a>阿坝</a>
                                        <a>安顺</a>
                                        <a>安康</a>
                                        <a>阿勒泰</a>
                                        <a>阿克苏</a>
                                        <a>安吉</a>
                                        <a>安丘</a>
                                        <a>安岳</a>
                                        <a>安平</a>
                                        <a>安宁</a>
                                        <a>安溪</a>
                                        <a>安化</a>
                                        <a>阿勒泰市</a>
                                        <a>安福</a>
                                        <a>阿荣旗</a>
                                        <a>安州区</a>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="menu-box fl clearfix">
                    <ul class="menu clearfix">
                        <router-link v-for="m in menus" :key="m.id" :to="m.path"><li :class="{active:m.isActive}" @click="selectMenu(m)">{{m.name}}</li></router-link>
                    </ul>
                </div>
            </div>
            <div class="right fr clearfix">
                <div class="app-box fl ">
                    <div>
                        <span class="fa fa-mobile-phone fa-2x"></span>
                        <span>&nbsp;APP下载</span>
                        <span class="fa fa-caret-down"></span>
                    </div>
                    <div class="download-box">
                        <img src="../assets/erweima.png" alt="扫码下载">
                        <p>扫码下载APP</p>
                        <p>选座更优惠</p>
                    </div>
                </div>
                <div class="search-box fl">
                    <input type="text" class="search-input" placeholder="找影视剧、影人、影院">
                    <a class="search-btn"></a>
                </div>
                <div class="user-head-box clearfix fl">
                    <div>
                        <img class="fl user-head-img" src="../assets/user-head.png" alt="">
                        <span class="fa fa-caret-down"></span>
                    </div>
                    <div>
                        <a href="#">登陆</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</template>

<script>
    export default {
        name: "my-nav",
        data:function () {
            return {
                menus:[
                    {id:1,name:'首页',path:'/',isActive:false},
                    {id:2,name:'电影',path:'/movies',isActive:true},
                    {id:3,name:'影院',path:'/theatres',isActive:false},
                    {id:4,name:'榜单',path:'/',isActive:false},
                    {id:5,name:'热点',path:'/',isActive:false},
                ]
            }
        },
        methods:{
            selectMenu:function (m) {
                this.menus.forEach(function (mm) {
                    mm.isActive = false
                })

                m.isActive = true
            }
        }
    }
</script>

<style src="../style/reset.css"></style>
<style src="../style/common.css"></style>
<style scoped>
    nav {
        background-color: #ffffff;
        border-bottom: 1px solid #d8d8d8;
        min-width: 1200px;
    }

    nav,nav .left,nav .right{
        height: 80px;
    }

    nav .container {
        height: 100%;
        margin: 0 auto;
    }
    nav .logo{
        line-height: 80px;
        display: block;
        width: 133px;
        height: 80px;
        background: url("../assets/logo.png") no-repeat;
        background-size: contain;
        background-position: 0;
    }
    nav .city-box{
        display: block;
        padding: 0px 10px;
        height: 80px;
        width: 80px;
        margin: 0px 8px;
        box-sizing: border-box;

    }
    nav .city-box .city-selected{

        height: 80px;
        width: 80px;
        line-height: 80px;
        text-align: center;
        border-left: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
        border-bottom: 1px solid #e5e5e5;
    }
    nav .city-box:hover .city-selected{
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #ffffff;
    }
    nav .city-box:hover .city-selector{
        display: block;
        position: relative;
        z-index: 1;
    }
    nav .city-box>.city-selected>span{
        display: inline-block;
        line-height: 80px;

    }
    nav .city-box .city-selector{
        display: none;
        width: 480px;
        height: 330px;
        overflow-y: scroll;
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        background-color: #fff;
    }

    nav .city-box .city-selector .gps-city{
        padding-left: 20px;
        padding-right: 20px;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #e5e5e5;
    }
    nav .city-box .city-selector .city-ul-box{
        padding-left: 20px;
        padding-right: 20px;
    }
    nav .city-box .city-selector .city-ul-box>ul.city-ul>li{
        padding-top: 15px;
    }
    nav .city-box .city-selector .city-ul-box>ul.city-ul>li>div:nth-of-type(1){
        float: left;
        width: 10%;
        height: 30px;
    }
    nav .city-box .city-selector .city-ul-box>ul.city-ul>li>div:nth-of-type(1)>span{
        position: relative;
        top: 2px;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        text-align: center;
        width: 20px;
        background-color: #cccccc;
        font-weight: bold;
    }
    nav .city-box .city-selector .city-ul-box>ul.city-ul>li>div:nth-of-type(2){
        display: inline-block;

        float: left;
        width: 90%;
    }
    nav .city-box .city-selector .city-ul-box>ul.city-ul>li>div:nth-of-type(2)>a{
        padding-left: 5px;
        padding-right: 5px;
    }
    nav .city-box .city-selector .city-ul-box>ul.city-ul>li>div:nth-of-type(2)>a:hover{

        background-color: #e5342a;
        color: white;
        border-radius: 10px;
    }

    nav .menu-box{
        height: 80px;
        margin-left: 40px;
    }
    nav .menu-box .menu>a>li{
        float: left;
        height: 80px;
        line-height: 80px;
        width: 80px;
        font-size: 18px;
        text-align: center;
        transition: background-color,color 500ms 0s;
    }
    nav .menu-box .menu>a>li.active{
        background-color: #e5342a;
        border-bottom: 1px solid #e5342a;
        color: white;
    }
    nav .menu-box .menu>a>li:hover:not(.active) {
        color: #e5342a;

    }

    nav .app-box{
        width: 130px;
        font-size: 16px;
        height: 80px;
        border-left: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
        text-align: center;
        margin-right: 10px;
    }
    nav .app-box:hover{
        border-left: 1px solid #d8d8d8;
        border-right: 1px solid #d8d8d8;
    }
    nav .app-box>div:nth-of-type(1){
        height: 80px;
    }
    nav .app-box>div:nth-of-type(1)>span {
        display: inline-block;
        height: 80px;
        line-height: 80px;
        box-sizing: border-box;
    }
    nav .app-box>div:nth-of-type(1)>span:nth-of-type(2){
        position: relative;
        top: -5px;
    }
    nav .app-box>div:nth-of-type(1)>span:nth-of-type(3){
        position: relative;
        top: -7px;
    }
    nav .app-box>.download-box{
        display: none;
        position: relative;
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        background-color: #ffffff;
        padding-bottom: 10px;
    }
    nav .app-box>.download-box>p:nth-of-type(2){
        color: #cccccc;
        font-size: 14px;
    }
    nav .app-box:hover>div:nth-of-type(1){
        border-bottom: 1px solid #ffffff;
    }
    nav .app-box:hover>.download-box{
        display: block;
    }
    nav .app-box>.download-box>img{
        width: 120px;
        margin: 0 auto;
    }

    nav .search-box {
        position: relative;
        height: 40px;
        margin-top: 20px;
        margin-right: 10px;
    }
    nav .search-box .search-input{
        height: 40px;
        width: 260px;
        border-radius: 30px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 14px;
        background-color: #faf8fa;
        box-sizing: border-box;
        border: 1px solid #d8d8d8;
        outline:none;
    }
    nav .search-box .search-btn{
        position: absolute;
        right: 0px;
        top: 0px;
        display: block;
        line-height: 80px;
        height: 40px;
        width: 40px;
        background: url("../assets/search-btn.png");
        background-color: #ef4238;
        border-radius: 30px;
    }
    nav .user-head-box{
        width: 102px;
        text-align: center;
        margin-left: 10px;
        box-sizing: border-box;
    }
    nav .user-head-box>div:nth-of-type(2){
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        background-color: #fff;
    }
    nav .user-head-box>div:nth-of-type(1)>.user-head-img{
        width: 40px;
        height: 40px;
        margin-top: 20px;

    }
    nav .user-head-box>div:nth-of-type(1){
        border-left: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
    }
    nav .user-head-box:hover>div:nth-of-type(1){
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
    }
    nav .user-head-box>div:nth-of-type(1){
        border-bottom: 1px solid #e5e5e5;
        padding-left: 15px;
        line-height: 80px;
        height: 80px;
    }
    nav .user-head-box:hover>div:nth-of-type(1){
        border-bottom: 1px solid #ffffff;
    }
    nav .user-head-box>div:nth-of-type(2){
        display: none;
        width: 100px;
        text-align: center;
        height: 50px;
        line-height: 50px;

    }
    nav .user-head-box:hover>div:nth-of-type(2){
        display: block;
    }
</style>
